<template>
  <div
    class="activation_table"
    :style="{ 'border-left': formatBorder(assignment.status) }"
    @click="$emit('click')"
  >
    <div
      :style="{
        'background-color': formatStaeColor(assignment.status),
      }"
      class="acitve_tab_top"
    >
      <div class="tab_head_item">
        <svg-icon :icon-class="formatIclass(assignment.status)" />
        <div
          class="tab_head_item_text"
          :style="{ color: formatTextcolor(assignment.status) }"
        >
          {{ formatText(assignment.status) }}
        </div>
      </div>
      <div class="tab_head_item">
        <svg-icon :icon-class="formatArrow(assignment.status)"></svg-icon>
        <div class="tab_head_item_text">
          发布时间：{{ assignment.releasedDate | formatDate }}
        </div>
      </div>
      <div class="tab_head_item">
        <svg-icon :icon-class="formatWatches(assignment.status)"></svg-icon>
        <div class="tab_head_item_text">
          分配时间：{{ assignment.activeDate | formatDate }}
        </div>
      </div>
    </div>
    <div class="active_tab_bottom">
      <div class="tab_body_item">
        <el-image
          v-if="
            assignment.device &&
            assignment.device.deviceType &&
            assignment.device.deviceType.imageUrl
          "
          class="body_item_img"
          :src="assignment.device.deviceType.imageUrl | filtersFileUrl()"
        />
        <svg-icon v-else class="body_item_img" icon-class="emptypicture" />
        <div class="body_item_text">
          <div class="item_text">
            设备：{{ (assignment.device && assignment.device.name) || "暂无" }}
          </div>
          <div
            class="item_text item_summary"
            v-if="assignment.device && assignment.device.comments"
          >
            {{ assignment.device.comments }}
          </div>
        </div>
      </div>
      <div class="tab_body_item">
        <el-image
          v-if="assignment.url"
          class="body_item_img"
          :src="assignment.url | filtersFileUrl()"
        />
        <svg-icon v-else class="body_item_img" icon-class="emptypicture" />
        <div class="body_item_text">
          <div class="item_text">用户：{{ assignment.username || "暂无" }}</div>
          <div
            class="item_text item_summary"
            v-if="assignment && assignment.remark"
          >
            {{ assignment.remark }}
          </div>
        </div>
      </div>
      <div class="tab_body_item">
        <el-image
          class="body_item_img"
          v-if="assignment.area && assignment.area.imageUrl"
          :src="assignment.area.imageUrl | filtersFileUrl()"
        />
        <svg-icon v-else class="body_item_img" icon-class="emptypicture" />
        <div class="body_item_text">
          <div class="item_text">
            站点：{{ (assignment.area && assignment.area.name) || "暂无" }}
          </div>
          <div
            class="item_text item_summary"
            v-if="assignment.area && assignment.area.description"
          >
            {{ assignment.area.description }}
          </div>
        </div>
      </div>
      <div class="tab_body_item">
        <el-image
          class="body_item_img"
          :src="assignment.asset.imageUrl | filtersFileUrl()"
          v-if="assignment.asset && assignment.asset.imageUrl"
        />
        <svg-icon v-else class="body_item_img" icon-class="emptypicture" />
        <div class="body_item_text">
          <div class="item_text">
            网关：{{ (assignment.asset && assignment.asset.name) || "暂无" }}
          </div>
          <div
            class="item_text item_summary"
            v-if="assignment.asset && assignment.asset.token"
          >
            {{ assignment.asset.token }}
          </div>
        </div>
      </div>
      <div class="tab_body_item">
        <el-image
          class="body_item_img"
          :src="assignment.voiceBox.imageUrl | filtersFileUrl()"
          v-if="assignment.voiceBox && assignment.voiceBox.imageUrl"
        />
        <svg-icon v-else class="body_item_img" icon-class="emptypicture" />
        <div class="body_item_text">
          <div class="item_text">
            音箱：{{
              (assignment.voiceBox && assignment.voiceBox.name) || "暂无"
            }}
          </div>
          <div
            class="item_text item_summary"
            v-if="assignment.voiceBox && assignment.voiceBox.model"
          >
            {{ assignment.voiceBox.model }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  formatBorder,
  formatIclass,
  formatTextcolor,
  formatText,
  formatArrow,
  formatWatches,
} from "@/views/common/js/device/assignments.js";
export default {
  props: {
    assignment: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    formatIclass() {
      return function (status) {
        return formatIclass(status);
      };
    },
    formatBorder() {
      return function (status) {
        return formatBorder(status);
      };
    },
    formatWatches() {
      return function (status) {
        return formatWatches(status);
      };
    },
    formatArrow() {
      return function (status) {
        return formatArrow(status);
      };
    },
    formatStaeColor() {
      return function (status) {
        if (status === "Active") {
          return "#F1F5EF";
        } else if (status === "Missing") {
          return "#FBF2F2";
        } else {
          return "#F2F2F2";
        }
      };
    },
    formatTextcolor() {
      return function (status) {
        return formatTextcolor(status);
      };
    },
    formatText() {
      return function (status) {
        return formatText(status);
      };
    },
  },
};
</script>

<style lang='scss' scoped>
@import "~@/styles/mixin.scss";
.activation_table {
  /* border-left: 3px solid #52c41a; */
  margin-bottom: 8px;
  border-bottom: 1px solid #e8e8e8;
  cursor: pointer;
  .active_tab_bottom {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    &:hover {
      background-color: #f4f9fd;
    }
    .tab_body_item {
      display: flex;
      width: 20%;
      .body_item_text {
        width: 100%;
        /* height: 42px; */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* padding: 4px 0; */

        .item_text {
          color: #333;
          font-size: 13px;
          /* margin: 4px 0; */
          /* white-space: nowrap; */
        }
        .item_summary {
          color: #999999;
          width: 80%;
          /* white-space: wrap; */
          @include textoverflow(1);
        }
      }
      .body_item_img {
        width: 42px;
        height: 42px;
        min-width: 42px;
        margin-right: 8px;
      }
    }
  }
  .acitve_tab_top {
    width: 100%;
    display: flex;
    padding: 15px 20px;
    .tab_head_item {
      width: 20%;
      display: flex;
      align-items: center;
      .tab_head_item_text {
        margin-left: 6px;
        font-size: 14px;
      }
    }
  }
}
</style>